<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        div{
            margin: 0 auto;
            margin-top: 200px;
        }
        .number{
            width: 180px;
            height: 40px;
            font-size: 16px;
            border: 1px solid #ccc;
            padding-left: 10px;
        }
        .button{
            width: 100px;
        }
    </style>
</head>
<body>
   <div>
    <input type="text" class="number n1"  />
    <select class="number type">
        <option>请选择</option>
        <option value="1">+</option>
        <option value="2">-</option>
        <option value="3">*</option>
        <option value="4">/</option>
    </select>
    <input type="text" class="number n2" />
    <input type="button" class="number button" value="="/>
    <input type="text" class="number" id="result"/>
   </div>
</body>
<script src="./js/jquery-3.6.0.min.js"></script>
<script>
    $(".button").click(function(){
        let n1 = $(".n1").val();
        let n2 = $(".n2").val();
        let type = $(".type").val();
        if(n1 && n2 && type){
            n1 = parseFloat(n1);
            n2 = parseFloat(n2);
            let result = 0;
            if(type == 1){
                result = n1 + n2;
            }else if(type == 2){
                result = n1 - n2;
            }else if(type == 3){
                result = n1 * n2;
            }else if(type == 4){
                result = n1 / n2;
            }
            $("#result").val(result);
        }else{
            alert("不符合规范")
        }
    })
</script>
</html>